<template>
  <div>
    <p>click {{$store.state.count}} times, count is {{evenOrOdd}}</p>

    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>

<script>

  export default {

    mounted () {
      console.log(this.$store)
    },
    data () {
      return {
        count: 0,
        evenOrOdd: ''
      }
    },
    computed: {
      evenOrOdd () {
        return this.$store.getters.evenOrOdd// store.js中定义
      }
    },

    methods: {// 主要要和dispatch中名称一一对应，可以理解为讲操作逻辑放入store.js文件中进行管理
      increment () {
        this.$store.dispatch('increment')
      },
      decrement () {
        this.$store.dispatch('decrement')
      },
      incrementIfOdd () {
        this.$store.dispatch('incrementIfOdd')
      },
      incrementAsync () {
        this.$store.dispatch('incrementAsync')
      }
    }
  }

</script>

<style>

</style>
